<template>
	<u-sticky offsetTop="-44">
		<view>
			<view class="container" @click="toggleMenu" v-if="!isPc">
				<view class="navbar">
					<u--image src="/static/images/导航栏.png" width="60rpx" height="60rpx"></u--image>
				</view>
				<view class="menu-overlay" v-if="isActive" @click.stop="closeMenu"></view>
				<view class="menu" :class="{ active: isActive }" style="max-height: 80%;">
					<view class="title" @click="goinActive()" v-if="!isInActivityPage">
						首頁
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinCompetition(5,id)">
						賽事資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinSignUp(8,id)">
						活動報名
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinGift(1,id)" v-show="false">
						加購禮
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinTrack(7,id)">
						賽道資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goRewardPage(2,id)">
						獎勵機制
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinCompetitionRules(9,id)">
						競賽規則
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinActiveRules(10,id)">
						活動規則
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinTrafficInformation(3,id)">
						交通資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinformation(1,id)" v-show="false">
						旅遊資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinformation(2,id)" v-show="false">
						住宿資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinVolunteer(6,id)">
						志工招募
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinElectronicCertificate(4,id)" v-show="false">
						電子證書
					</view>
					<view class="title" @click="goinAudiovisual(11)" v-show="false">
						影音專區
					</view>
					<view class="title" @click="getCJ()" v-if="!isInActivityPage">
						成績查詢
					</view>
					<view class="title" @click="goinNews(12)" v-show="false">
						最新消息
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinActive()">
						回首頁
					</view>
					<view class="title" @click="goVip()" v-if="!isInActivityPage">
						會員專區
					</view>
					<view class="title" @click="goPublicGood(13)" v-if="!isInActivityPage">
						公益活動
					</view>
					<view class="title" @click="goAboutUs()" v-if="!isInActivityPage">
						聯絡我們
					</view>
				</view>
			</view>
			<view v-if="isPc">
				<view class="pcNav">
					<view class="titlePc" @click="goinActive()">
						首頁
					</view>
					<view class="titlePc" @click="goinAudiovisual(11)" v-show="false">
						影音專區
					</view>
					<view class="titlePc" @click="getCJ()">
						成績查詢
					</view>
					<view class="titlePc" @click="goinNews(12)" v-show="false">
						最新消息
					</view>
					<view class="titlePc" @click="goVip()">
						會員專區
					</view>
					<view class="titlePc" @click="goPublicGood(13)">
						公益活動
					</view>
					<view class="titlePc" @click="goAboutUs()">
						聯絡我們
					</view>
				</view>
				<view class="sideMenu" v-if="isInActivityPage">
					<view class="title" v-if="isInActivityPage" @click="goinCompetition(5,id)">
						賽事資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinSignUp(8,id)">
						活動報名
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinGift(1,id)" v-show="false">
						加購禮
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinTrack(7,id)">
						賽道資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goRewardPage(2,id)">
						獎勵機制
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinCompetitionRules(9,id)">
						競賽規則
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinActiveRules(10,id)">
						活動規則
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinTrafficInformation(3,id)">
						交通資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinformation(1,id)" v-show="false">
						旅遊資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinformation(2,id)" v-show="false">
						住宿資訊
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinVolunteer(6,id)">
						志工招募
					</view>
					<view class="title" v-if="isInActivityPage" @click="goinElectronicCertificate(4,id)" v-show="false">
						電子證書
					</view>
				</view>
			</view>
		</view>
	</u-sticky>

</template>

<script>
	import storage from '@/utils/storage'
	export default {
		name: "sunMenu",
		props: {
			id: {
				type: String, // 根据实际情况选择类型
				required: false // 是否必需
			}
		},
		data() {
			return {
				isPc: false,
				isActive: false,
				menuHeight: '0px',
				isInActivityPage: false // 新增属性
			}
		},
		mounted(op) {
			this.checkDevice();
			// 检查当前页面是否为活动页面
			this.isInActivityPage = this.$route.path === '/pages/activeDetail' || this.$route.path === '/pages/signup' ||
				uni.getStorageSync("activeId");
		},
		methods: {
			checkDevice() {
				const userAgent = navigator.userAgent;
				if (/Windows NT|Macintosh/.test(userAgent)) {
					// 判断为PC端，例如Windows或Mac系统
					this.isPc = true;
				} else if (/Mobile|Android|iPhone|iPod|BlackBerry|Windows Phone/.test(userAgent)) {
					// 判断为移动端，例如Android、iOS或Windows Phone等
					this.isPc = false;
				} else {
					// 其他类型的设备
					this.isPc = false; // 或者根据需要设置为true
				}
			},
			goinPreviousTournaments() {
				uni.navigateTo({
					url: '/pages/u/previousTournaments'
				})
			},
			goinElectronicCertificate(type, activeId) {
				activeId = activeId ? activeId : uni.getStorageSync("activeId")
				uni.navigateTo({
					url: '/pages/u/electronicCertificate?type=' + type + '&activityId=' + activeId + '&date=' +
						this.$u.timeFormat(uni.getStorageSync("activeTime"), 'yyyymmdd')
				})
			},
			goinVolunteer(type, activeId) {
				activeId = activeId ? activeId : uni.getStorageSync("activeId")
				uni.navigateTo({
					url: '/pages/u/volunteer?type=' + type + '&activityId=' + activeId + '&date=' + this.$u
						.timeFormat(uni.getStorageSync("activeTime"), 'yyyymmdd')
				})
			},
			goinTrafficInformation(type, activeId) {
				activeId = activeId ? activeId : uni.getStorageSync("activeId")
				uni.navigateTo({
					url: '/pages/u/trafficInformation?type=' + type + '&activityId=' + activeId + '&date=' + this
						.$u.timeFormat(uni.getStorageSync("activeTime"), 'yyyymmdd')
				})
			},
			goinActiveRules(type) {
				uni.navigateTo({
					url: '/pages/u/activeRules' + '?date=' + this.$u.timeFormat(uni.getStorageSync("activeTime"),
						'yyyymmdd') + '&type=' + type
				})
			},
			goinCompetitionRules(type) {
				uni.navigateTo({
					url: '/pages/u/competitionRules' + '?date=' + this.$u.timeFormat(uni.getStorageSync(
						"activeTime"), 'yyyymmdd') + '&type=' + type
				})
			},
			goinTrack(type, activeId) {
				activeId = activeId ? activeId : uni.getStorageSync("activeId")
				uni.navigateTo({
					url: '/pages/u/track?type=' + type + '&activityId=' + activeId + '&date=' + this.$u.timeFormat(
						uni.getStorageSync("activeTime"), 'yyyymmdd')
				})
			},
			goinGift(type, activeId) {
				activeId = activeId ? activeId : uni.getStorageSync("activeId")
				uni.navigateTo({
					url: '/pages/gift?activityId=' + activeId + '&date=' + this.$u.timeFormat(uni.getStorageSync(
						"activeTime"), 'yyyymmdd')
				})
			},
			goinSignUp(type) {
				uni.navigateTo({
					url: '/pages/u/signUp' + '?date=' + this.$u.timeFormat(uni.getStorageSync("activeTime"),
						'yyyymmdd') + '&type=' + type
				})
			},
			goinCompetition(type, activeId) {
				activeId = activeId ? activeId : uni.getStorageSync("activeId")
				uni.navigateTo({
					url: '/pages/activeDetail?id=' + activeId + '&date=' + this.$u.timeFormat(uni.getStorageSync(
						"activeTime"), 'yyyymmdd')
				})
			},
			goPublicGood(type) {
				uni.navigateTo({
					url: '/pages/u/publicGood' + '?type=' + type
				})
			},
			goinNews(type) {
				uni.navigateTo({
					url: '/pages/u/news' + '?type=' + type
				})
			},
			goinAudiovisual(type) {
				uni.navigateTo({
					url: '/pages/u/audiovisual' + '?type=' + type
				})
			},
			goAboutUs() {
				uni.navigateTo({
					url: '/pages/aboutUs'
				})
			},
			toggleMenu() {
				this.isActive = !this.isActive;
			},
			getCJ() {
				uni.navigateTo({
					url: '/pages/score'
				})
			},
			goinformation(type, activeId) {
				activeId = activeId ? activeId : uni.getStorageSync("activeId")
				uni.navigateTo({
					url: '/pages/information?type=' + type + '&activityId=' + activeId + '&date=' + this.$u
						.timeFormat(uni.getStorageSync("activeTime"), 'yyyymmdd')
				})
			},
			goRewardPage(type, activeId) {
				activeId = activeId ? activeId : uni.getStorageSync("activeId")
				uni.navigateTo({
					url: '/pages/reward?type=' + type + '&activityId=' + activeId + '&date=' + this.$u.timeFormat(
						uni.getStorageSync("activeTime"), 'yyyymmdd')
				})
			},
			goinActive(type) {
				uni.reLaunch({
					url: '/pages/activity'
				})
			},
			goVip() {
				if (this.$store.state.user.token != "") {
					uni.navigateTo({
						url: '/pages/myVip'
					})
				} else {
					uni.navigateTo({
						url: '/pages/myLogin'
					})
				}

			},
			closeMenu() {
				this.isActive = false;
			}
		}
	}
</script>

<style scoped lang="scss" scoped>
	.container {
		padding-top: 120rpx;
	}

	.navbar {
		padding: 24rpx;
		background-color: $uni-color-primary;
		height: 120rpx;
		display: flex;
		justify-content: flex-end;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.menu {
		background-color: #fff;
		padding: 0 28rpx;
		position: fixed;
		top: 120rpx;
		left: 0;
		right: 0;
		z-index: 100;
		visibility: hidden;
		opacity: 0;
		height: 0;
		overflow: hidden;
		transition: all 0.2s ease-out;

		&.active {
			padding-top: 28rpx;
			visibility: visible;
			opacity: 1;
			height: auto;
			max-height: calc(100vh - 120rpx);
			overflow-y: auto;
		}
	}

	.title {
		background-color: #5a9892;
		padding: 24rpx;
		margin-bottom: 24rpx;
		border-radius: 12rpx;
		color: #fff;
	}

	.menu-overlay {
		position: fixed;
		top: 120rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}

	.pcNav {
		padding-right: 20px;
		font-weight: bolder;
		font-size: 18px;
		height: 98px;
		justify-content: flex-end;
		align-items: center;
		display: flex;
		background-color: #5a9892;
		text-align: center;

		.titlePc {
			background-color: #5a9892;
			padding: 24rpx;
			border-radius: 12rpx;
			color: #fff;
		}
	}

	.sideMenu { 
		position: fixed; 
		top: 120px;
		left: 20px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		padding: 16rpx;
		width: 200px;
		max-height: calc(100vh - 210px);
		overflow-y: auto; 
		.title {
			background-color: #5a9892;
			border-radius: 8px;
			color: #fff;
			font-size: 16px;
			transition: all 0.3s ease;
			cursor: pointer; 
			margin-bottom: 8px;
			padding: 12px;
			&:hover {
				background-color: #4a8782;
				transform: translateX(5px);
			} 
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>